<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">教学视频购买详情页</el-breadcrumb-item>
      <el-breadcrumb-item></el-breadcrumb-item>
    </el-breadcrumb>
    <!--<iframe src="../../../xfy/index.html" width="100%" height="100%" frameborder="0" scrolling="auto"style="position:absolute;top: 0px;left: 0px;"></iframe>-->

    <!--{{listData}}-->

    <el-row>
      <el-col :span="4">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
      <el-col :span="10">
        <div>
          <img :src="listData.thumbPath" style="width: 350px;height: 350px">
        </div>

      </el-col>
      <el-col :span="11">
        <div class="right_box">
          <el-form label-width="120px" :model="orderForm">
            <div class="bigPic">
              <h3>{{ listData.course.cname }}</h3>
              <div>
                <p><span>惊 爆 价：</span> <sub>￥</sub>{{ listData.course.cprice }}</p>
                <p>
                  <span>时长：</span>{{ listData.course.ctotalDuration }}
                  <br><span>时间：</span>{{ listData.course.createTime }}
                </p>
                <p>
                  课 程 描 述 ：
                  <span>{{ listData.course.cdesc }}</span>
                </p>
              </div>

              <el-input size="small" v-model="orderForm.cid" v-show="false"></el-input>
              <el-date-picker type="datetime" v-model="orderForm.pCreateTime" v-show="false"/>
              <el-input size="small" v-model="orderForm.lid" v-show="false"></el-input>

              <div>
                <el-button type="success" plain style="position:relative; bottom:-40px;right: -100px;"
                           @click="buyer()">立即購買
                </el-button>
              </div>
            </div>

          </el-form>
        </div>
      </el-col>
      <el-col :span="1">
        <div class="grid-content bg-purple-light"></div>
      </el-col>

    </el-row>


  </div>


</template>

<script>
// import { deptList, deptSave, deptDelete } from '../../api/userMG'
export default {
  data() {
    return {
      listData: {
        course: {},
        login:{}

      },


      orderForm: {
        cid:this.$route.query.cid,
        lid:JSON.parse(localStorage.getItem('loginUser')).lid,
        price: 0,
        total: 0
      },


      dialogImageUrl: '',
      dialogVisible: false,

    }
  },
  created() {


  },
  mounted() {
    this.getdata();

  },

  filters: {
    // 图片预览过滤
    filterImg(item) {
      if (typeof item === "string") {
        return item.split("|");
      } else {
        return item
      }
    },
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {

    // 获取公司列表
    getdata() {
      // 表格加载开始
      const _this = this;

      let cid = this.$route.query.cid;

      console.log(this.$route.query.cid)

      let res;
      axios.get(localStorage.getItem("globalUrl") + "coursePath/findCoursePathPoBycId?cId=" + cid).then(function (resp) {
        _this.listData = resp.data.data;

        _this.orderForm.price = resp.data.data.cprice;


        // 表格加载结束
        _this.loading = false
      });

    },

    //购买
    buyer() {

      const _this = this;
      this.orderForm.createtime = new Date();

      axios.post(localStorage.getItem("globalUrl") + "purchase/save", this.orderForm).then(function (resp) {
        if(resp.data.flag){
          // 购买成功，跳转成功页面
          _this.$router.push('/success');
        }else{
          _this.$message({
            type: 'info',
            message: '购买失败!'+resp.data.message
          });
        }



      });


    },


    // 输入框
    handleChange(value) {

      this.orderForm.total = this.orderForm.number * this.orderForm.price;
    },

  }
}
</script>



